<template>
	<view class="content">
		<!-- 商户性质选择 -->
		<view class="type-box">
			<text class="type-title">营业执照信息</text>
		</view>
		<!-- 营业执照照片 -->
		<view class="business-license-image-box">
			<image class="business-license-image" :src="formStore.busLicenseInfo || '/static/yyzz_img.png'" mode="scaleToFill" @tap="showSelectImage(1)"></image>
		</view>
		<!-- 营业执照表单信息 -->
		<view class="business-license-form-box">
			<xh-form-input title="商户名称" v-model="formStore.companyName" @onBlur="editEnd"></xh-form-input>
			<xh-form-input title="社会信用代码" v-model="formStore.busLicenseId"></xh-form-input>
			<xh-form-date type="1"></xh-form-date>
			<view class="type-top-box">
				<text class="type-top-text">商户性质</text>
				<xh-radio title="个体工商户" :isSelect="formStore.merType == '2'" @change="change('2')"></xh-radio>
				<xh-radio class="type-radio" title="企业" :isSelect="formStore.merType == '0'" @change="change('0')"></xh-radio>
				<view class="type-line"></view>
			</view>
		</view>
		<!-- 经营信息组件 -->
		<view class="jyxx-box">
			<view class="jyxx-title">经营信息</view>
			<xh-form-input title="商户简称" placeholder="请输入商户简称" v-model="formStore.mercSn"></xh-form-input>
			<xh-form-input title="所属行业" placeholder="请选择" isSelect v-model="formStore.mccTypeName" @showSelect="showSelectIndustry"></xh-form-input>
			<xh-form-input title="经营区域" placeholder="请选择" isSelect v-model="selectAreaValue" @showSelect="showSelectCity"></xh-form-input>
			<xh-form-textarea title="经营地址" placeholder="请输入店铺经营详细地址" v-model="formStore.bussinessAddr"></xh-form-textarea>
		</view>
		<!-- 上传相关照片组件 -->
		<view class="images-info-box">
			<view class="images-info-text">
				*请上传相关门店照，并确保上传的图片清晰可辨
			</view>
			<view class="images-box">
				<image class="images-item" :src="formStore.doorPhoto || '/static/mtz_img.png'" mode="scaleToFill" @tap="showSelectImage(2)"></image>
				<image class="images-item" :src="formStore.indoorPhoto || '/static/njz_img.png'" mode="scaleToFill" @tap="showSelectImage(3)"></image>
				<image class="images-item" :src="formStore.cashierPhoto || '/static/sytz_img.png'" mode="scaleToFill" @tap="showSelectImage(4)"></image>
			</view>

		</view>
		<!-- 底部提交按钮组件 -->
		<xh-submit @btnClick="buttonClick"></xh-submit>
		<xh-select-city ref="selectCityRef" :isArea="true"></xh-select-city>
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref, computed } from 'vue'
	import { useFormStore, useUserStore } from '@/stores'
	import { getMerchantInfo, getImageInfoByOcr } from '@/config/api.js'

	const formStore = useFormStore()
	const userStore = useUserStore()
	onLoad(async () => {
		await userStore.updateUserInfo()
		if (userStore.user.authStatus != '01' && (userStore.user.authStatus == '03' || userStore.user.authStatus == '00' || userStore.reportStatus == '2')) {
			getMerchantInfoData()
		}
	})
	//城市选择组件ref对象
	const selectCityRef = ref()
	//显示选择的经营区域数据
	const selectAreaValue = computed(() => {
		if (formStore.storeProvinceName.length > 0) {
			return `${formStore.storeProvinceName},${formStore.storeCityName},${formStore.storeAreaName}`
		}
		return ''
	})

	//选择行业
	const showSelectIndustry = () => {
		uni.navigateTo({
			url: '/pages/auth/select-industry/select-industry'
		})
	}
	//选择经营区域
	const showSelectCity = () => {
		selectCityRef.value.open()
	}
	//改变商户性质
	const change = (type) => {
		formStore.merType = type
	}
	//编辑结束
	const editEnd = ()=>{
		if(formStore.companyName.includes('公司')){
			formStore.merType = '0'
		}
		else{
			formStore.merType = '2'
		}
	}
	//下一步
	const buttonClick = () => {
		console.log('下一步')
		if (formStore.merType != '0' && formStore.merType != '2') {
			uni.$tools.showToast('请选择商户性质')
			return
		} else if (uni.$u.test.isEmpty(formStore.busLicenseInfo)) {
			uni.$tools.showToast('请上传营业执照信息')
			return
		} else if (uni.$u.test.isEmpty(formStore.companyName)) {
			uni.$tools.showToast('请输入商户名称')
			return
		} else if (uni.$u.test.isEmpty(formStore.busLicenseId)) {
			uni.$tools.showToast('请输入统一社会信用代码')
			return
		} else if (uni.$u.test.isEmpty(formStore.busRegStartDt)) {
			uni.$tools.showToast('请选择执照有效期开始日期')
			return
		} else if (uni.$u.test.isEmpty(formStore.busRegEndDt) && formStore.busRegType != '0') {
			uni.$tools.showToast('请选择执照有效期结束日期')
			return
		} else if (uni.$tools.clearSpaceAndEnter(formStore.mercSn).length < 5 || uni.$tools.clearSpaceAndEnter(formStore.mercSn).length > 64) {
			uni.$tools.showToast('商户简称不得小于5个字或大于64个字')
			return
		} else if (uni.$u.test.isEmpty(formStore.mccTypeName)) {
			uni.$tools.showToast('请选择所属行业')
			return
		} else if (uni.$u.test.isEmpty(formStore.storeAreaName)) {
			uni.$tools.showToast('请选择经营区域')
			return
		} else if (uni.$u.test.isEmpty(formStore.bussinessAddr)) {
			uni.$tools.showToast('请输入经营地址')
			return
		} else if (uni.$u.test.isEmpty(formStore.doorPhoto)) {
			uni.$tools.showToast('请上传门头照')
			return
		} else if (uni.$u.test.isEmpty(formStore.indoorPhoto)) {
			uni.$tools.showToast('请上传内景照')
			return
		} else if (uni.$u.test.isEmpty(formStore.cashierPhoto)) {
			uni.$tools.showToast('请上传收银台照')
			return
		}
		uni.navigateTo({
			url: '/pages/auth/idcard-info/idcard-info'
		})
	}

	/* 选择照片
	type: 1：营业执照 2：门头照 3：内景照 4：收银台照
	 */
	const showSelectImage = async (type) => {
		try {
			const res = await uni.$tools.uploadImage()
			if (type == 1) {
				formStore.busLicenseInfo = res
				getOcrInfo(res)
			} else if (type == 2) {
				formStore.doorPhoto = res
			} else if (type == 3) {
				formStore.indoorPhoto = res
			} else {
				formStore.cashierPhoto = res
			}
		} catch (e) {
			uni.$tools.showToast(e)
		}
	}
	// 获取ocr识别营业执照信息
	const getOcrInfo = async (url) => {
		let params = {}
		params.fileUrl = url
		params.apiType = '03'
		const res = await getImageInfoByOcr(params)
		const ocrInfo = JSON.parse(res.result.data)
		const ocrRes = ocrInfo.words_result
		if (uni.$u.test.isEmpty(ocrRes)) {
			return
		}
		// 营业执照识别结果
		const busLicenseId = ocrRes['社会信用代码'].words
		if (busLicenseId != '无') {
			formStore.busLicenseId = busLicenseId
		}
		const companyName = ocrRes['单位名称'].words
		if (companyName != '无') {
			formStore.companyName = companyName
			if(formStore.companyName.includes('公司')){
				formStore.merType = '0'
			}
			else{
				formStore.merType = '2'
			}
		}
		const startDate = ocrRes['成立日期'].words
		if (startDate != '无') {
			formStore.busRegStartDt = uni.$tools.format_ymd(startDate)
		}
		const endDate = ocrRes['有效期'].words
		if (endDate != '无') {
			if (endDate.indexOf('长期') != -1) {
				formStore.busRegType = '0'
				formStore.busRegEndDt = ''
			} else {
				formStore.busRegType = '1'
				formStore.busRegEndDt = uni.$tools.format_ymd(endDate)
			}
		}
	}


	//获取商户信息数据
	const getMerchantInfoData = async () => {
		const res = await getMerchantInfo()
		formStore.$patch(res.result)
		///开户城市
		const cityCodes = formStore.bankAddress.split(',')
		const cityNames = formStore.bankCity.split(',')
		//经营区域
		const storeAreaNames = formStore.bussinessArea.split(',')
		//身份证有效期
		const certValidTimes = formStore.certValidTime.split(',')

		if (cityCodes.length == 1) {
			formStore.provinceCode = cityCodes[0]
			formStore.provinceName = cityNames[0]
		}
		if (cityCodes.length > 1) {
			formStore.provinceCode = cityCodes[0]
			formStore.cityCode = cityCodes[1]
			formStore.provinceName = cityNames[0]
			formStore.cityName = cityNames[1]
		}
		if (storeAreaNames.length == 2) {
			formStore.storeProvinceName = storeAreaNames[0]
			formStore.storeCityName = storeAreaNames[1]
		}
		if (storeAreaNames.length > 2) {
			formStore.storeProvinceName = storeAreaNames[0]
			formStore.storeCityName = storeAreaNames[1]
			formStore.storeAreaName = storeAreaNames[2]
		}
		if (certValidTimes.length > 1) {
			formStore.certStartTime = certValidTimes[0]
			const endTime = certValidTimes[1]
			if (endTime == '长期') {
				formStore.certEndTime = ''
				formStore.isLongTime = true
			} else {
				formStore.certEndTime = endTime
			}
		}
		if (formStore.busRegType == '0') {
			formStore.busRegEndDt = '2999-12-30'
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		font-size: 28rpx;
		.type-box {
			padding: 30rpx;

			.type-title {
				color: $xh-title-color;
				font-size: 28rpx;
				font-weight: bold;
				margin-top: 30rpx;
			}
		}

		.business-license-image-box {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 35rpx 60rpx;
			background-color: white;

			.business-license-image {
				width: 630rpx;
				height: 270rpx;
			}
		}

		.business-license-form-box {
			margin-top: 20rpx;

			.type-top-box {
				position: relative;
				display: flex;
				align-items: center;
				background-color: white;
				height: 100rpx;
				padding-left: 30rpx;

				.type-top-text {
					margin-right: 80rpx;
				}

				.type-radio {
					margin-left: 40rpx;
				}

				.type-line {
					position: absolute;
					left: 30rpx;
					right: 0;
					bottom: 0;
					height: 1px;
					transform: scaleY(0.5);
					background-color: $xh-line-color;
				}
			}
		}

		.jyxx-box {
			background-color: white;

			.jyxx-title {
				padding: 30rpx 30rpx 0 30rpx;
				font-weight: bold;
			}
		}

		.images-info-box {
			background-color: white;

			.images-info-text {
				padding: 30rpx;
				color: #2C8DF4;
				font-size: 24rpx;
			}

			.images-box {
				display: flex;
				flex-wrap: wrap;

				.images-item {
					width: 330rpx;
					height: 220rpx;
					margin-left: 30rpx;
					margin-bottom: 30rpx;
				}
			}

		}
	}
</style>